<template>
    <Modal v-model="ShowModal" title="添加流程"  :options="options" class="modal">
      <div>
        <Form>
          <FormItem label="步骤名称">
                <Input placeholder="请精确输入步骤名称" v-model="StepInfoCopy.StepName"></Input>
          </FormItem>
          <FormItem label="类选择器">
                <Input placeholder="请精确输入类选择器" v-model="StepInfoCopy.Selector"></Input>
          </FormItem>
          <FormItem label="流程类型">
            <Select  v-model="StepInfoCopy.Type" >
                <option value="0">按钮</option>
                <option value="1">输入框</option>
                <option value="2">复选框</option>
                <option value="3">单选框</option>
                <option value="4">模态框</option>
            </Select>
          </FormItem>
          <FormItem label="值" v-if="StepInfoCopy.Type==1">
                <Input placeholder="请输入要填的值" v-model="StepInfoCopy.Value"></Input>
          </FormItem>
          <FormItem label="是否监听请求响应">
              <!-- <Checkbox :value=CheckBoxArray></Checkbox> -->
          </FormItem>
          <FormItem label="输入URL" v-if="StepInfoCopy.isRequest==true" >
              <Input placeholder="请输入匹配URL" v-model="StepInfoCopy.URL"></Input>
          </FormItem>
          <FormItem label="操作描述">
            <textarea cols="150" rows="10" v-model="StepInfoCopy.OperateDetail"></textarea>
          </FormItem>
          <FormItem label="截图名">
                <Input placeholder="请输入名称" v-model='StepInfoCopy.ShotName' ></Input>
          </FormItem>
        </Form>
      </div>
    </Modal>
</template>
<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  Watch,
  Emit,
  Model,
  Inject,
  Provide
} from "vue-property-decorator";
import { Getter, Action, State, Mutation } from "vuex-class";
import { cloneDeep } from "lodash";
//TODO 导入搜索接口
//props的属性一般不需要再在类中进行初始化
@Component({
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  components: {}
})
export default class AddModal extends Vue {
  // CheckBoxArray = ["Maximum", "xxxx"];
  value: any;
  StepInfo: any = {
    StepName: "",
    Type: "2",
    Selector: "",
    Value: "",
    OperateDetail: "",
    ShotName: "",
    isRequest: false,
    URL: ""
  };
  StepInfoCopy = cloneDeep(this.StepInfo);
  options: object = {
    area: "65%",
    anim: 3,
    resize: true,
    maxmin: true,
    moveOut: true,
    btn: ["确认", "取消"],
    yes: this.yes,
    bt2: this.btn2
  };
  yes() {
    this.ShowModal = false;
    this.$emit("mkdom", this.StepInfoCopy);
    this.StepInfoCopy = cloneDeep(this.StepInfo);
  }
  btn2() {}
  get ShowModal() {
    return this.value;
  }
  set ShowModal(v: boolean) {
    this.$emit("input", v);
  }
  mounted() {
    //组件被加载的时候触发
  }
  created() {}
}
</script>
<style scoped>
.modal {
  padding: 30px;
}
</style>
